<template>
  <div>
    <!-- 头部 -->
    <hc></hc>
    <!-- 内容 -->
    <div>
      <div class="h-60p bg-ccc w-100 flex align-center justify-center mt-20">
        <div class="w-70 flex align-center justify-between">
          <p class="f-bold f18">商品详情</p>
          <p class="tc">概述  |  详情</p>
        </div>
      </div>
      <div class="m-auto w-70 flex align-center justify-between py-20 box-sizing">
        <img style="width:500px;height:400px;" class="radius-base" :src="baseURL + formData.image">
        <div class="bg-ccc h-100 p-20 box-sizing flex-1 ml-20 radius-base relative" style="height:400px">
          <p class="tc f18 f-bold">{{ formData.name }}</p>
          <p class="mt-20 f14">{{ formData.detail }}</p>
          <p class="f16 my-20"> 价格： <span class="fc-red f-bold">{{ formData.price / 100 }}</span> 元/单价</p>
          <div
            class="flex justify-between flex-column f14"
            style="height:80px;">
            <p class=""> <span class="f-bold">安全：</span>  新鲜商品 24小时保质</p>
            <p> <span class="f-bold">配送：</span>  同市配送 3小时内配送到家</p>
            <p class="f14 c-gray"> <span class="f-bold">支付：</span>
              支持
              <i class="iconfont icon-huabei fc-blue mr-2"></i>花呗
              <i class="iconfont icon-xinyongqia fc-yellow mr-2"></i>信用卡
              <i class="iconfont icon-weixin fc-green mr-2"></i>微信
              <i class="iconfont icon-zhifubao fc-blue mr-2"></i>支付宝
            </p>
          </div>
          <div
            class="m-auto w-100 absolute flex align-center justify-center"
            style="bottom:20px">
            <Button type="primary" @click="addShoppingTrolley">加入购物车</Button>
          </div>
        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <fc></fc>
  </div>
</template>

<script>
import { detail, addCart } from 'api'
import mixins from '@/mixins/index.js'
import hc from 'components/header-component'
import fc from 'components/floor-component'
export default {
  mixins: [mixins],
  components: {
    hc,
    fc
  },
  data() {
    return {
      formData: {}
    }
  },
  created() {
    this.detail()
  },
  methods: {
    // 详情数据
    detail() {
      detail(this.$route.query).then(res => {
        this.formData = res
      })
    },
    // 添加到购物车
    addShoppingTrolley() {
      this.$Modal.confirm({
        title: '是否添加到购物车？',
        onOk: () => {
          this.addCart()
        },
        onCancel: () => {

        }
      })
    },
    // 添加到购物车请求
    addCart() {
      let data = {
        productId: this.formData.id,
        count: 1
      }
      addCart(data).then(res => {
        this.$Message.info('添加到购物车成功')
      })
    }
  }
}
</script>

<style scoped>
.fc-yellow{
  color: rgb(234,146,83);
}
.fc-green{
  color: rgb(16,210,105);
}
.mr-2{
  margin-right: 2px;
}
</style>